<template>
	<view>
		<template v-if="searchList.length === 0">
			<view class="py-2 font-md px-2">搜索历史</view>
			<view class="flex flex-wrap">
				<view class="border mx-2 my-2 px-2 rounded " v-for="(item,index) in list" :key="index"
					hover-class="bg-light" @click="clickSearchHistory(item)">
					{{item}}
				</view>
			</view>
		</template>

		<template v-else>
			<block v-for="(item,index) in searchList" :key="index">
				<common-list :item="item" :index="index"></common-list>
			</block>
		</template>
	</view>
</template>

<script>
	//模拟服务器数据 
	const demo = [
		{
			username: '鞠了个攻',
			userpic: '/static/tabbar/微信图片_20240418093242.jpg', //头像
			newstime: '2024.4.28 9:07',
			isFollow: false, //当前是否被关注
			title: '鞠婧祎',
			titlepic: '/static/tabbar/cb840149d59e4d666b10f13c60a9d8d.jpg', //帖子主图
			support: {
				type: 'support',
				support_count: 30, //赞
				unsupport_count: 1, //踩
			},
			comment_count: 3, //评论
			share_num: 15 //转发
		},
		{
			username: '鞠婧祎超话',
			userpic: '/static/tabbar/jjy2.jpg',
			newstime: '2024.4.24 9:01',
			isFollow: false,
			title: '鞠婧祎',
			titlepic: '/static/tabbar/jjy9.jpg',
			support: {
				type: 'support',
				support_count: 844,
				unsupport_count: 11,
			},
			comment_count: 551,
			share_num: 732
		},
		{
			username: 'TNB_k.鞠婧祎',
			userpic: '/static/tabbar/jjy3.jpg',
			newstime: '2024.4.23 3:24',
			isFollow: false,
			title: '鞠婧祎',
			titlepic: '/static/tabbar/jjy1.jpg',
			support: {
				type: 'support',
				support_count: 1115,
				unsupport_count: 15,
			},
			comment_count: 831,
			share_num: 999
		}
	]
	let courses = ["History", "Physics", "Mathematics", "Biology", "Chemistry"];
	let coursesInChinese = ["历史", "物理", "数学", "生物", "化学"];

	import commonList from "@/components/common/common-list.vue"
	export default {
		components: {
			commonList
		},
		data() {
			return {
				searchText: '', //用户输入的字符串 （用户想搜什么）
				list: [...courses, ...coursesInChinese], //模拟数据 将来自数据库中记录的搜索历史 柔和到一起
				searchList: [] //将服务器端数据放到本地的 数组
			};
		},
		methods: {
			//点击搜索历史
			clickSearchHistory(text) {
				this.searchText = text
				this.searchEvent()
			},
			//搜索逻辑
			searchEvent() {

				//加载搜索状态 
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				//请求搜索   半成品  后台处理 搜索结果 例如使用SpringBoot 
				setTimeout(() => {
					this.searchList = demo
					//隐藏加载状态
					uni.hideLoading()
				}, 2000)
			}

		},
		//监听导航栏输入内容
		onNavigationBarSearchInputChanged(e) {
			//console.log(e.text);
			this.searchText = e.text
		},
		//监听导航栏的搜索按钮
		onNavigationBarButtonTap(e) {
			//console.log(e);
			//如果说判定点到 搜索 按钮上
			if (e.index === 0) {
				//执行搜索逻辑
				this.searchEvent()
			}
		}
	}
</script>

<style lang="scss">

</style>